<template>
  <view>
    <view class="task-info-table" v-if="entities.length">
      <view v-for="(item, index) in entities" class="task-info-row" :key="index">
        <view class="task-info-body">
          <view>
            <view class="task-info-label">款项名称</view>
            <view class="task-info-content">{{ item.paymentNodeName }}</view>
          </view>
          <view>
            <view class="task-info-label">应收金额（元)</view>
            <view class="task-info-content">{{ item.paymentMoney }}</view>
          </view>
          <view>
            <view class="task-info-label">实收金额(元)</view>
            <view class="task-info-content">{{ item.realCollectionPaymentMoney }}</view>
          </view>
          <view>
            <view class="task-info-label">管理费(元)</view>
            <view class="task-info-content">{{ item.manageMoney }}</view>
          </view>
          <view>
            <view class="task-info-label">备注</view>
            <view class="task-info-content">{{ item.remark }}</view>
          </view>
        </view>
        <view class="task-info-action">
          <u-button size="small" type="primary" @click="handleEdit(item, index)">编辑</u-button>
        </view>
      </view>
    </view>
    <u-empty v-else mode="data" text="暂无相关数据" icon="/static/empty/data.png"></u-empty>
    <u-popup :show="popupVisible">
      <u-form
        labelPosition="top"
        class="px-1 pb-2"
        ref="form"
        labelWidth="auto"
        :labelStyle="{
          fontSize: '14px',
          color: '#B2B2B2',
          lineHight: '20px',
        }"
        :model="editItem"
        :rules="rules"
      >
        <view class="basic-style">
          <u-form-item label="款项名称">
            <u--input disabled :value="editItem.paymentNodeName" />
          </u-form-item>
          <u-form-item label="应收金额(元)" prop="paymentMoney">
            <h-money-input disabled placeholder="请输入应收金额" :value="editItem.paymentMoney"></h-money-input>
          </u-form-item>
          <u-form-item label="实收金额(元)" prop="realCollectionPaymentMoney" required>
            <h-money-input placeholder="请输入实收金额" v-model="editItem.realCollectionPaymentMoney" @change="calcManageMoney"></h-money-input>
          </u-form-item>
          <u-form-item label="管理费(元)" prop="manageMoney" required>
            <h-money-input disabled placeholder="请输入管理费" v-model="editItem.manageMoney"></h-money-input>
          </u-form-item>
          <u-form-item label="备注">
            <u--textarea maxlength="500" :confirm-type="null" count v-model="editItem.remark" placeholder="请输入备注"></u--textarea>
          </u-form-item>
        </view>
        <view class="task-action">
          <u-button type="warning" size="small" @click="handleCancel">取消</u-button>
          <u-button type="primary" size="small" @click="handleConfirm">保存</u-button>
        </view>
      </u-form>
    </u-popup>
  </view>
</template>

<script>
// import { filterMultiDictText } from '@/utils/JDictSelectUtil.js'

export default {
  name: 'ManageclearingFormInfo',
  props: {
    entities: {
      type: Array,
      default: () => [],
    },
    bchte: {
      type: [String, Number],
      default: '',
    },
    dictOptions: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      popupVisible: false,
      index: null,
      rules: {
        realCollectionPaymentMoney: [{ type: 'number', required: true, message: '请输入实收金额!', trigger: ['blur', 'change'] }],
        manageMoney: [{ type: 'number', required: true, message: '请输入管理费!', trigger: ['blur', 'change'] }],
      },
      editItem: {
        paymentNodeName: '',
        paymentMoney: '',
        realCollectionPaymentMoney: '',
        manageMoney: '',
        remark: '',
      },
      backItem: {},
      // filterMultiDictText,
    }
  },
  methods: {
    calcManageMoney(rnb) {
      this.editItem.manageMoney = rnb * 0.2;
    },
    handleEdit(item, index) {
      this.popupVisible = true
      this.index = index
      this.backItem = { ...item }
      this.editItem = JSON.parse(JSON.stringify(item))
    },
    handleCancel() {
      this.editItem = { ...this.backItem }
      this.entities[this.index] = { ...this.backItem }
      this.popupVisible = false
    },
    async handleConfirm() {
			await this.$set(this.entities, this.index, this.editItem)
      await this.$refs.form.validate()
      this.popupVisible = false
    },
    validateForm() {
      return this.$refs.form.validate()
    },
  },
}
</script>

<style scoped lang="scss">
.task-info-table {
  border-radius: 12rpx;
  padding: 10rpx 20rpx;
  margin: 20rpx 0;
  border: 1rpx solid #e0e0e0;
  display: grid;
  .task-info-body {
    display: grid;
    // grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 10rpx 20rpx;
    padding: 10rpx 0;
  }
  .task-info-row {
    padding-bottom: 20rpx;
  }
  .task-info-row ~ .task-info-row {
    border-top: 1rpx solid #e0e0e0;
  }
  .task-info-label {
    font-weight: bold;
    color: #666;
		
  }
  .task-info-content {
    color: #999;
    font-size: 24rpx;
		white-space: pre-line;
		word-wrap: break-word;
		word-break: break-all;
  }
}
.task-action {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rpx;
}
</style>
